<template>
  <div class="main_box" style="padding:10px">
    <div class="add_wrap">
      <div class="tit">
        <h2>{{ dataForm.villageId ? "完善数据" : "新增数据" }}</h2>
        <el-button type="success" plain size="small" icon="fa fa-mail-forward" @click="returnList">返回</el-button>
      </div>
      <el-form :model="dataForm" ref="dataForm" label-width="200px" :rules="roleRules">
        <el-row>
          <el-form-item label="60-69岁老人数量" width="300" align="center" prop="sixtyRank">
            <el-input v-model="dataForm.sixtyRank" placeholder="请输入60-69岁老人数量"></el-input>
          </el-form-item>
          <el-form-item label="70-79岁老人数量" width="300" align="center" prop="seventyRank">
            <el-input v-model="dataForm.seventyRank" placeholder="请输入70-79岁老人数量"></el-input>
          </el-form-item>
          <el-form-item label="80-89岁老人数量" width="300" align="center" prop="eightyRank">
            <el-input v-model="dataForm.eightyRank" placeholder="请输入80-89岁老人数量"></el-input>
          </el-form-item>
          <el-form-item label="90岁以上老人数量" width="300" align="center" prop="ninetyRank">
            <el-input v-model="dataForm.ninetyRank" placeholder="请输入90岁以上老人数量"></el-input>
          </el-form-item>
          <el-form-item label="一百岁老人数量" width="300" align="center" prop="hundredOld">
            <el-input v-model="dataForm.hundredOld" placeholder="请输入一百岁老人数量"></el-input>
          </el-form-item>
          <el-form-item label="居民数量" width="300" align="center" prop="residents">
            <el-input v-model="dataForm.residents" placeholder="请输入居民数量"></el-input>
          </el-form-item>
          <el-form-item label="服务长辈" width="300" align="center" prop="elderNum">
            <el-input v-model="dataForm.elderNum" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="空巢长辈" width="300" align="center" prop="emptyElders">
            <el-input v-model="dataForm.emptyElders" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="独居高龄" width="300" align="center" prop="aloneAdvanced">
            <el-input v-model="dataForm.aloneAdvanced" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="需求对接" width="300" align="center" prop="docking">
            <el-input v-model="dataForm.docking" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="服务订单" width="300" align="center" prop="orders">
            <el-input v-model="dataForm.orders" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="保障对象" width="300" align="center" prop="protectionTarget">
            <el-input v-model="dataForm.protectionTarget" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="公益活动" width="300" align="center" prop="publicWelfare">
            <el-input v-model="dataForm.publicWelfare" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="退役军人" width="300" align="center" prop="veterans">
            <el-input v-model="dataForm.veterans" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="志愿服务" width="300" align="center" prop="volunteer">
            <el-input v-model="dataForm.volunteer" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="其他" width="300" align="center" prop="otherNum">
            <el-input v-model="dataForm.otherNum" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="除颤仪" width="300" align="center" prop="aed">
            <el-input v-model="dataForm.aed" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="胸牌" width="300" align="center" prop="badge">
            <el-input v-model="dataForm.badge" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="智能呼叫器" width="300" align="center" prop="beeper">
            <el-input v-model="dataForm.beeper" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="摄像头" width="300" align="center" prop="camera">
            <el-input v-model="dataForm.camera" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="拐杖" width="300" align="center" prop="crutch">
            <el-input v-model="dataForm.crutch" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="门磁报警器" width="300" align="center" prop="doorLock">
            <el-input v-model="dataForm.doorLock" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="动态血压仪" width="300" align="center" prop="dynamicPressure">
            <el-input v-model="dataForm.dynamicPressure" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="燃气报警器" width="300" align="center" prop="gas">
            <el-input v-model="dataForm.gas" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="云喇叭" width="300" align="center" prop="horn">
            <el-input v-model="dataForm.horn" placeholder="请输入内容"></el-input>
          </el-form-item>

          <el-form-item label="红外报警器" width="300" align="center" prop="infrared">
            <el-input v-model="dataForm.infrared" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="血压仪" width="300" align="center" prop="pressure">
            <el-input v-model="dataForm.pressure" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="跌倒报警器" width="300" align="center" prop="radar">
            <el-input v-model="dataForm.radar" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="睡眠监测" width="300" align="center" prop="sleep">
            <el-input v-model="dataForm.sleep" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="智能烟雾报警器" width="300" align="center" prop="smoke">
            <el-input v-model="dataForm.smoke" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="sos报警器" width="300" align="center" prop="sos">
            <el-input v-model="dataForm.sos" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="血糖仪" width="300" align="center" prop="sugar">
            <el-input v-model="dataForm.sugar" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="智护手表" width="300" align="center" prop="watch">
            <el-input v-model="dataForm.watch" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="水浸卫士" width="300" align="center" prop="waterFlood">
            <el-input v-model="dataForm.waterFlood" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="服务图片，最多可上传20张">
            <UploadOss accept="image" limit="20" @uploadFileList="getUploadFile" folder="serverImg"></UploadOss>
          </el-form-item>
        </el-row>
        <div style="text-align: center;margin:10px 0 ">
          <el-button type="primary" @click="sureClick">保存</el-button>
        </div>
        <div class="tit">
          <h2>商户信息</h2>
        </div>
        <el-row>
          <div style="margin-bottom: 10px;text-align: right;">
            <el-button type="default" icon="el-icon-plus" circle @click="addBusiness"></el-button>
          </div>
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column label="">
              <template slot-scope="scope">
                <el-button type="default" icon="el-icon-minus" circle @click="removeBusiness(index)"></el-button>
              </template>
            </el-table-column>
            <el-table-column prop="date" label="商户名称" width="180">
              <template slot-scope="scope">
                <el-input v-model="scope.row.name" placeholder="请输入商户名称"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="date" label="商户地址" width="180">
              <template slot-scope="scope">
                <el-input v-model="scope.row.address" placeholder="请输入商户地址"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="date" label="主营业务" width="180">
              <template slot-scope="scope">
                <el-input v-model="scope.row.mainServer" placeholder="请输入主营业务"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="date" label="服务人次" width="180">
              <template slot-scope="scope">
                <el-input type="number" v-model="scope.row.serverCount" placeholder="请输入服务人次"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="date" label="服务星级评分(1-5)" width="180">
              <template slot-scope="scope">
                <el-input type="number" @input="()=>{
                                    if(scope.row.score<1 || scope.row.score>5){
                                        $message.error('请输入服务星级评分(1-5)')
                                        scope.row.score = 5
                                    }
                                }" v-model="scope.row.score" placeholder="请输入服务星级评分(1-5)"></el-input>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <div style="text-align: center;margin:10px 0 ">
          <el-button type="primary" @click="addBusinessData()">保存</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import Region from "@/components/Region";
import VillageApi from "@/api/address/village";
import UploadOss from "../../components/UploadOss.vue";

export default {
  data() {
    return {
      userRole: "",
      detailRole: "",
      isEdit: false,
      dataForm: {
        aed: "",
        aloneAdvanced: "",
        badge: "",
        beeper: "",
        camera: "",
        crutch: "",
        docking: "",
        doorLock: "",
        dynamicPressure: "",
        eightyRank: "",
        elderNum: "",
        emptyElders: "",
        gas: "",
        horn: "",
        hundredOld: "",
        infrared: "",
        keyFocus: "",
        ninetyRank: "",
        orders: "",
        otherNum: "",
        pressure: "",
        protectionTarget: "",
        publicWelfare: "",
        radar: "",
        residents: "",
        seventyRank: "",
        sixtyAbove: "",
        sixtyRank: "",
        sleep: "",
        smoke: "",
        sos: "",
        sugar: "",
        tenantId: "",
        veterans: "",
        villageId: "",
        volunteer: "",
        watch: "",
        serverImages: "",
        waterFlood: ""
      },
      tableData: [
        {
          name: '',
          address: '',
          mainServer: '',
          serverCount: '',
          score: '',
        }
      ],
      loadingIns: false,
      roleRules: {},
      roleList: [],
      fileList: []
    };
  },
  components: {
    Region,
    UploadOss
  },
  mounted() {
    this.init();
  },
  methods: {
    addBusiness() {
      let obj = {
        name: '',
        address: '',
        main_server: '',
        server_count: '',
        score: '',
      }
      this.tableData.push(obj)
    },
    removeBusiness(i) {
      if (this.tableData.length == 1) {
        this.$message.error("最少填写一个商户信息")
        return false
      }
      this.tableData.splice(i, 1)
    },
    init() {
      // this.getRoleInfoList();
      // 获取用户的角色信息
      // this.userRole = getStorage(USER_INFO).userRole;
      // this.detailRole = getStorage(USER_INFO).detailRole;
      if (this.$route.query.id) {
        this.dataForm.villageId = this.$route.query.id;
        this.getData();
      }
    },


    getData() {
      VillageApi.getPerfectData({
        id: this.dataForm.villageId
      }).then(res => {
        if (res.data != null) {
          this.dataForm = res.data
          this.isEdit = true
        } else {
        }
      });
      VillageApi.getBusinessData({
        villageId: this.dataForm.villageId
      }).then(res => {
        if (res.data.length != 0) {
          this.tableData = res.data
        }
      });
    },
    getUploadFile(val) {
      let _this = this;
      if (!val) {
        _this.$Utils.messageError('请选择文件上传');
        return;
      }
      _this.dataForm.serverImages = val.join(",");
    },
    sureClick() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {

          if (this.isEdit) {
            this.editData();
          } else {
            this.addData();
          }
        }
      });
    },

    addData() {
      let params = {
        ...this.dataForm
      };
      delete params.tenantId
      delete params.keyFocus
      delete params.sixtyAbove
      VillageApi.addPerfectData(params).then(res => {
        this.$Utils.notifySuccess();
        this.returnList();
      });
    },

    editData() {
      let params = {
        ...this.dataForm
      };
      delete params.tenantId
      delete params.keyFocus
      delete params.sixtyAbove
      VillageApi.editPerfectData(params).then(data => {
        this.$Utils.notifySuccess();
        this.returnList();
      });
    },

    addBusinessData() {
      let param = {
        list: this.tableData,
        villageId: this.dataForm.villageId
      };
      VillageApi.addBusinessData(param).then(res => {
        this.$Utils.notifySuccess();
        this.returnList();
      });
    },

    returnList() {
      this.$store.dispatch("delView", this.$route);
      this.$router.back();
    },

  }
};
</script>
<style lang="scss" scoped>
@import "@/assets/css/views/add.scss";
</style>
